<template>
  <view class="item-view br-8 mb-12">
    <view class="border-bottom disFlxJS pa-12">
      <text class="fz-14 font-bold default-color br-8 flex-1 ov-1">{{ item?.createTime }}</text>

      <CustomTag
        :text="getStatusUI.text"
        font-size="24rpx"
        :background-color="getStatusUI.style.backgroundColor"
        :color="getStatusUI.style.color"
        :border="(getStatusUI.style.border as string)"
        padding="8rpx 16rpx"
      />
    </view>
    <view class="pa-12 border-bottom">
      <!-- 供需 -->
      <view
        v-if="showSupplyDemandInfo"
        class="pa-12 mb-12 disFlxAC br-8"
        @click="toSupplyDemandDetails"
        style="background-color: #f2f3f5"
      >
        <TImage
          v-if="item?.boType === BoTypeEnum.Supply"
          class="flex-shrink-0 mr-4"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/gong.png"
          width="40rpx"
          height="40rpx"
        />
        <TImage
          v-else
          class="flex-shrink-0 mr-4"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/xu.png"
          width="40rpx"
          height="40rpx"
        />
        <text class="fz-14 default-color flex-1 ov-1">{{ item?.title }}</text>
        <text class="ali-icon fz-16 ml-12" style="color: #969799">&#xe67b;</text>
      </view>
      <!-- 问题 -->
      <view class="disFlx mb-12">
        <TImage
          class="flex-shrink-0"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/problem-icon.png"
          width="40rpx"
          height="40rpx"
        />
        <view class="flex-1 ov-2 ml-8 fz-16 font-bold default-color">
          <text>{{ item?.content }}</text>
        </view>
      </view>
      <!-- 回答 -->
      <view v-if="item?.replyContent" class="disFlx pa-12 br-8" style="background-color: #f2f3f5">
        <TImage
          class="flex-shrink-0"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/answer-icon.png"
          width="40rpx"
          height="40rpx"
        />
        <view class="flex-1 ov-3 ml-8 fz-14" style="color: #646566">
          <text>
            {{ item?.replyContent }}
          </text>
        </view>
      </view>
    </view>
    <view class="pa-12 disFlxAC">
      <view class="flex-1">
        <template v-if="type === 'received'">
          <!-- 置顶 -->
          <text v-if="item?.isTop === PublicBooleanEnum.YES" class="ali-icon fz-16 color1">
            &#xe673;
          </text>
          <!-- 公开 -->
          <text v-if="item?.isShow === PublicBooleanEnum.YES" class="ali-icon fz-16 color1 ml-12">
            &#xe6cf;
          </text>
        </template>
      </view>
      <view style="width: 176rpx">
        <TButton
          text="查看详情"
          class="gutter-btn"
          :customStyle="{
            border: '2rpx solid #2878FF',
            color: '#2878FF',
          }"
          custom-class="h-32 linh-32 br-16"
          @click="goDetail"
        />
      </view>
      <view
        v-if="type === 'received' && props.item?.isReply !== PublicBooleanEnum.YES"
        class="ml-12"
        style="width: 148rpx"
      >
        <TButton
          text="去回复"
          type="primary"
          class="gutter-btn"
          custom-class="h-32 linh-32 br-16"
          @click="goDetail(true)"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed, type CSSProperties, type PropType } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';
  import CustomTag from '@/components/CustomTag/index.vue';
  import type { QuestionDetails } from '@/router/types/modules';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { PublicBooleanEnum } from '@/enums/publicModuleEnum';
  import type { IQuestionPageListResult } from '@/api/businessOpportunities/type';
  import { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import { propTypes } from '@/utils/propTypes';

  const props = defineProps({
    item: Object as PropType<IQuestionPageListResult>,
    type: String as PropType<QuestionDetails['type']>,
    showSupplyDemandInfo: propTypes.bool.def(true),
  });

  const getStatusUI = computed<{ style: CSSProperties; text: string }>(() => {
    switch (props.item?.isReply) {
      case PublicBooleanEnum.NO:
        return {
          style: {
            backgroundColor: '#e29942',
            color: '#fff',
          },
          text: '待回复',
        };
      case PublicBooleanEnum.YES:
        return {
          style: {
            backgroundColor: '#d0f7ff',
            color: '#2878ff',
          },
          text: '已回复',
        };
      default:
        return { style: {}, text: '' };
    }
  });
  function toSupplyDemandDetails() {
    navigateTo({ name: 'supplyDemandDetails', options: { id: props.item?.boInfoId! } });
  }
  function goDetail(autoFocus?: boolean) {
    if (props.item?.id && props.type) {
      navigateTo({
        name: 'questionDetails',
        options: {
          type: props.type,
          data: props.item,
          autoFocus,
        },
      });
    }
  }
</script>

<style lang="scss" scoped>
  .item-view {
    background-color: #fff;
    .border-bottom {
      border-bottom: 1px solid #ebedf0;
    }
    .color1 {
      color: #969799;
    }
  }
</style>
